<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>注册</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 user-scalable=no" />
		<!-- 删除默认的苹果工具栏和菜单栏 ： 即启用 WebApp 全屏模式  -->
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<!-- 在web app应用下状态条（屏幕顶部条）的颜色；默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）若值为“black-translucent”将会占据页面px位置，浮在页面上方（会覆盖页面20px高度–iphone4和itouch4的Retina屏幕为40px）。 -->
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<!-- 忽略数字自动识别为电话号码 ,忽略识别邮箱 -->
		<meta name="format-detection" content="telephone=no, email=no" />
		<!-- 启用360浏览器的极速模式(webkit) -->
		<meta name="renderer" content="webkit">
		<!-- 避免IE使用兼容模式 -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<!-- uc强制竖屏 -->
		<meta name="screen-orientation" content="portrait" />
		<!-- QQ强制竖屏 -->
		<meta name="x5-orientation" content="portrait">
		<!-- UC强制全屏 -->
		<meta name="full-screen" content="true" />
		<!-- QQ强制全屏 -->
		<meta name="x5-fullscreen" content="true" />
		<!-- 360强制全屏 -->
		<meta name="360-fullscreen" content="true" />
		<link rel="stylesheet" href="css/base.css" />
		<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
		<script type="text/javascript" src="js/jquery-1.12.4.js" ></script>		
		<script type="text/javascript" src="js/jquery.cookie.js" ></script>
		
	</head>
	<style>
		
		.header{
			width: 100%;	
			height: 50px;		
			line-height: 50px;		
			text-align: center;
			border-bottom: 1px solid #ccc;	
			position: relative;
			background: #fbfbfb;
		}
		img{
			width: 100%;
		}
		.header .backicon{
			position: absolute;
			height: 50px;
			width: 50px;
			text-align: center;
			left: 0px;
			top: 0px;
			
		}
		.header .backicon span{
			display: inline-block;
			width: 26px;
			height: 26px;
			background: url(img/back.png) center no-repeat;
			margin: 14px 0 0 14px;
			background-size: contain;
		}
		.header h1{
			font-size: 20px;
		}
		.logo{
			margin: 50px auto;
			width: 96px;
			height: 96px;
			background: url(img/logo_icon.png) no-repeat;
			background-size: contain;
		}
		}
		.register{
			width:100%;			
		}
		
		form{
			margin: 0px auto;
			width: 90%;
			position: relative;
		}
		.register .cancelpic{
			background: url(img/gototop.png) no-repeat;
			background-size: contain;
			position: absolute;
			width: 24px;
			height: 24px;
			top: 12px;
			left: 85%;
			display: none;
		}
		.forminput{
			width:100%;
			height: 50px;
			/*line-height: 42px;*/
			outline: none;
			border: none;
			padding: 10px;
			box-sizing: border-box ;
			margin-bottom: 12px;
			border-radius: 5px;
			border: 1px solid #ccc;
			-webkit-appearance: none;
			font-size: 16px;
		}
		.register .code{
			display: inline-block;
			color: #27B676;
			font-size: 14px;
			position: absolute;
			top: 60px;
			right: 20px;
			text-decoration: none;
			
		}
		.register .bgImg{
			display:inline-block;
			width: 24px;
			height: 24px;			
		}	
		.register .invisible{
			position: absolute;
			background: url(img/eyes.png) no-repeat;
			background-size: contain;
			left: 85%;
			top: 142px;
		}
		.register .visible{
			position: absolute;
			background: url(img/eye.png) no-repeat;
			background-size: contain;
			left: 85%;
			top: 142px;
		}
		.register .register_btn{
			margin-bottom: 5px;			
			text-align: center;
			outline: none;
			border: none;
			font-size: 16px;
			background:linear-gradient(to top,#36BD7B,#47CE69) ;
		}
}
		.register .register_btn a:focus{
			text-decoration: none;
		}
		.register p,.register p a{
			font-size: 16px;
			color: #666;
		}
		.register p a{
			text-decoration: underline;			
		}
		.register .login{
			text-align: center;
			margin-top: 30px;
		}
		.register .login a{
			color: #27B676;
			text-decoration: none;
		}
		.register .xieyi,.register .xieyi a{
			font-size: 14px;
		}
		#getting{
			outline: none;
			border: none;
			background: #fff;
			color:#27B676 ;
			position: absolute;
			top: 76px;
			right: 20px;
			font-size: 16px;
			-webkit-appearance: none;
			
		}
		::-webkit-input-placeholder{
			font-size:16px;
		}
		.mask{
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
			background: #000;
			opacity: .3;
			z-index: 999;
			display: none;
		}
		.popup{
			width: 320px;
			height: 100px;
			background: #fff;
			text-align: center;
			border-radius: 10px;
			z-index: 99999;
			box-sizing: border-box;
			display: none;
					
		}
		.popup>div{
			font-size: 18px;
		}
		.popup div:nth-of-type(1){
			height: 50px;
			line-height: 50px;

			border-bottom: 1px solid #ccc;
		}
		.popup div:nth-of-type(2){
			height: 50px;
			line-height: 50px;
			color:#36BD7B ;
		}
	</style>
	<body>
		<div class="header">
			<h1>注册</h1>
			<div class="backicon" onclick="location.href = 'index.html';return false;"><span></span></div>
		</div>

		<div class="logo"></div>
		<div class="register">
			<form>
				<input type="text" name="text" placeholder="手机号"  class="username forminput"/>
				<div class="cancelpic"></div>
				<input type="text" name="psw" id="pswcode" placeholder="验证码" required class="forminput"/>
				<input type="button" id="getting" value="获取验证码" class="code"/>
				<!--<a href="#" class="code" id="code">获取验证码</a>-->
				<input type="password" name="psw" id="password" placeholder="请输入密码至少6位" class="forminput"/>	
				<a href="#" id="passwordeye" class="invisible bgImg"></a>
				<input type="button" id="submitBtn" class="register_btn forminput" value="注 册" />
				
				<p class="xieyi">点击注册代表你已阅读并同意<a href="#">用户使用协议</a></p>
				<p class="login">已有账号 <a href="#" onclick="location.href = 'loade.html';return false;">立即登录</a></p>
			</form>							
		</div>
		<div class="mask"></div>
		<div class="popup">
			<div class="phonenum">手机号不能为空</div>
			<div class="okBtn">OK</div>
		</div>
		<script>
			document.getElementById("submitBtn").style.color="white";
			document.getElementById("submitBtn").style.fontSize="18px";
			var ch=document.body.clientWidth||document.documentElement.clientWidth;
			var ct=document.body.clientHeight||document.documentElement.clientHeight;
			console.log(ch+" "+ct)
			var popupL=ch/2-160+"px";
			var popupT=ct/2-50+"px";
			$(function(){
				$(".popup").css("position","absolute");
				$(".popup").css("left",popupL);
				$(".popup").css("top",popupT);
				console.log(popupL+" "+popupT);
			});
			
			//验证码事件
			var codenum=Math.ceil(Math.random()*10000);
			$(function(){
		        $('#getting').click(function(){
		            var btn = $(this);
		            var count = 60;	            
		            var resend = setInterval(function(){
		                count--;
		                if (count > 0){                	
		                    btn.val(count+"秒后可重新获取").attr('disabled',true).css('cursor','not-allowed');;
		                    $.cookie("captcha", count, {path: '/', expires: (1/86400)*count});                     	
		                }else {
		                    clearInterval(resend);
		                    btn.val("获取验证码").removeAttr('disabled style');
		                }
		            }, 1000);
		            $(".mask").show();
					$(".phonenum").text(codenum);
					$(".popup").show();
		            btn.attr('disabled',true).css('cursor','not-allowed');
		           
		        });
	    	});
							
			
			$(function(){
				/*密码可见与不可见*/
				var passwordeye = $('#passwordeye');
				var showPwd = $("#password");
				passwordeye.click(function(){
				   	console.log(1);
				       if(passwordeye.hasClass('invisible')){
				           passwordeye.removeClass('invisible').addClass('visible');
				           showPwd.prop('type','text');
				       }else{
				           passwordeye.removeClass('visible').addClass('invisible');
				           showPwd.prop('type','password');
				       };
				   });  
				//用户名输错取消事件
				$("input[name=text]").focus(function(){
					$(".cancelpic").show();
					$(".cancelpic").css("opacity","1");					
				});
			
				$(".cancelpic").click(function(){						
				 	$("input[name=text]").val("");	
				 	$("input[name=text]").attr("placeholder","手机号");
			  	});
				
				$("input[name=text]").blur(function(){	
					$(".cancelpic").css("opacity","0");	
					
				});
				
								
				/*表单验证*/
				var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/; 
				
				$("#submitBtn").click(function(){					
					var usenames=$(".username").val();
					var code=$("#pswcode").val();
					var psw=$("#password").val();
					if(usenames.length==0){
						$(".mask").show();
						$(".phonenum").text("用户名不能为空");
						$(".popup").show();
						
					} else if(!myreg.test($(".username").val())){
						$(".mask").show();
						$(".phonenum").text("手机号格式不正确");
						$(".popup").show();		
						
					}else if(code!=codenum){
						console.log(code+" "+codenum);
						$(".mask").show();						
						$(".phonenum").text("验证码不正确");
						$(".popup").show();
						
					}else if(psw.length<6){
						$(".mask").show();
						$(".phonenum").html("密码格式不正确");
						$(".popup").show();
						
					}else{
						location="index.html";
					}	
					
				});
				//弹出层事件
				$(".okBtn").click(function(){					
					$(".popup").hide();
					$(".mask").hide();
				});
				
				
				
				
				
			});	
		</script>
	</body>
</html>
